<template>
    <div>
        <div class="bannerform IsLogin">
            <ul>
                <li v-for="(itme,index) in LoginWay" :key="index" @click="SelectLogin(index)" :class="LoginWayIndex ==index?'selcclass':''" >{{itme}}</li>
            </ul>
            <div class="form-Login-phone" v-if="LoginWayIndex==0">
                <label for>
                <input type="tel" style="text-align:center" name="phone" v-model="phoneNumbercode" placeholder="请输入您的手机号" autocomplete="off"/>
                </label>
                <label>
                <input type="number" class="inputcodes" style="text-align:center" v-model="Code" autocomplete="off" name="code"/>
                <span class="getcodes" v-show="show" @click="checkcode">获取验证码</span>
                <span class="getcodes countdisabled" v-show="!show">{{count}} s</span>
                </label>
                <label>
                <input class="sendcodes" type="button" name="sendcode" @click.prevent="GoPasswordCode" value="登录"/>
                </label>
            </div>
            <div v-else-if="LoginWayIndex==1">
                <div class="pass-logo">
                <label for>
                    <input type="tel" name="text" v-model="phoneNumber" placeholder="请输入您的手机号" autocomplete="off"/>
                </label>
                <label>
                    <input type="password" class="password" v-model="Password" autocomplete="off" placeholder="请输入您的密码" name="password"/>
                </label>
                <label>
                    <input class="sendcode" type="button" name="sendcode" @click.prevent="GoPassword()" value="登录"/>
                </label>
                </div>
            </div>
        </div>
        <div class="over" @click="closedenglu"></div>
    </div>
</template>
<script>
export default {
    inject: ['reload'],
    data(){
        return{
            show:true,
            props:['IsLogin'],
            LoginWay: ["短信登录", "密码登录"],
            LoginWayIndex: 0,
            phoneNumbercode:'',
            phoneNumber:'',
            Code:'',
            Password:'',
            count:'',
        }
    },
    created(){
        var myDate = new Date();
    },
    mounted(){
        
    },
    components: {//组件注册

    },
    methods:{
        GoPassword() {
            console.log(typeof this.phoneNumber);
            var data = {
                login_name: this.phoneNumber,
                login_pass: this.Password,
                login_type: "1",
            };
            this.$axios({
                method: "post",
                url: "http://101.37.66.151:8768/eg-api/user/user/login",
                data: data
            }).then(res => {
                //这里使用了ES6的语法
                console.log(res.data); //请求成功返回的数据
                if (res.data.code == 0) {
                    var userinfo = res.data.data.userInfoEntity;
                    console.log(userinfo);
                    localStorage.setItem(
                    "userinfo",
                    JSON.stringify(res.data.data.userInfoEntity)
                    );
                    localStorage.setItem(
                    "userSign",
                    JSON.stringify(res.data.data.userSign)
                    );
                    this.IsLogin = false
                    this.$emit("update:avatar",userinfo.avatar)
                    this.$emit("update:IsLogin",this.IsLogin)
                    this.$emit("update:IsLogins",true)
                    if(this.$route.path == '/views/LiveclassroomDetial'){
                      this.$router.push({path:'/views/Liveclassroom/ClassRoomInfo',query: {index: 3}})
                    }else{
                      this.reload()
                    }
                    
                } else if (res.data.code == 10005) {
                    alert(res.data.message);
                }
            }).catch(error => {
                console.log(error); //请求失败返回的数据
            });
        },
        GoPasswordCode() {
            //验证码登录方法
            var data = {
                login_name: this.phoneNumbercode,
                verification_code: this.Code,
                login_type: "2"
            };
            this.$axios({
                method: "post",
                url: "http://101.37.66.151:8768/eg-api/user/user/login",
                data: data
            }).then(res => {
                //这里使用了ES6的语法
                console.log(res.data); //请求成功返回的数据
                if (res.data.code == 0) {
                    var userinfo = res.data.data.userInfoEntity;
                    console.log(userinfo);
                    localStorage.setItem(
                    "userinfo",
                    JSON.stringify(res.data.data.userInfoEntity)
                    );
                    localStorage.setItem(
                    "userSign",
                    JSON.stringify(res.data.data.userSign)
                    );
                    this.IsLogin = false
                    this.$emit("update:avatar",userinfo.avatar)
                    this.$emit("update:IsLogin",this.IsLogin)
                    this.$emit("update:IsLogins",true)
                    if(this.$route.path == '/views/LiveclassroomDetial'){
                      this.$router.push({path:'/views/Liveclassroom/ClassRoomInfo',query: {index: 3}})
                    }else{
                      this.reload()
                    }
                } else if (res.data.code == 10005) {
                    alert(res.data.message);
                }
            }).catch(error => {
                console.log(error); //请求失败返回的数据
            });
        },
        SelectLogin(e) {
            this.LoginWayIndex = e;
        },
        checkcode() {
            //获取验证码
            var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if (this.phoneNumbercode == "") {
                alert("请输入手机号码");
            } else if (!reg.test(this.phoneNumbercode)) {
                alert("手机格式不正确");
            } else {
                this.$axios({
                methods: "get",
                url:
                    "http://101.37.66.151:8768/eg-api/user/sms/send?mobile=" +
                    this.phoneNumbercode +
                    ""
                }).then(res => {
                console.log(res);
                if (res.data.code == 10009) {
                    alert(res.data.message);
                }else if(res.data.code == 10006){
                    alert(res.data.message)
                } else if (res.data.code == 0) {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                        } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                        }
                    }, 1000);
                    }
                    alert(res.data.message);
                }
                });
            }
        },
        closedenglu(){
            this.IsLogin = false
            this.$emit("update:IsLogin",this.IsLogin)
            
          
        },
        
  }
}
</script>
<style lang="less" scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}
.over{
 position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: 0;
    left: 0;
    z-index: 1002;
    background-color: #111111;
}
.sendcode {
  background: rgba(42, 189, 190, 1) !important;
  border-radius: 18px;
  color: #ffffff;
  font-size: 16px;
}
.password{
  width: 100%;
  input {
    width: 90%;
    height: 40px;
    padding-left: 4%;
    border-radius: 15px;
    border: 1px solid #f3f3f3;
    outline: none;
    background: #f3f3f3;
  }
}
.pass-logo {
  position: relative;
  width: 80%;
  height: 260px;
  margin: 0 auto;
  label {
    display: block;
    width: 100%;
    height: 40px;
    width: 262px;
    margin-top: 20px;
    input {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(71, 206, 207, 1);
      border-radius: 18px;
      outline: none;
      text-align: center;
    }
  }
}
.countdisabled {
  color: #000 !important;
}
.form-Login-phone {
  position: relative;
  width: 80%;
  height: 260px;
  margin: 0 auto;
  label {
    display: flex;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    input {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(71, 206, 207, 1);
      border-radius: 18px;
      outline: none;
    }
  }
  .inputcodes {
    width: 60%;
  }
  .form-Login-phone > label > input:first-child {
    padding-left: 4% !important;
  }
  .getcodes {
    display: inline-block;
    width: 35%;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    margin-left: auto;
    color: #47cecf;
    font-size: 14px;
    padding: 0;
    border: 1px solid #47cecf;
  }
  .sendcodes {
    background: #2abdbe;
    color: #ffffff;
    font-size: 16px;
  }
}
.selcclass {
  color: #47cecf;
}
    .bannerform {
  width: 23.5%;
  justify-content: flex-end;
  height: 320px;
  background-image: url("/images/活动框背景.png");
  border-radius: 18px;
  background-size: 100% 100%;
  z-index: 1000;
  margin-left: auto;
  margin-top: 9px;
}
.IsLogin {
  // background-image: none !important;
  background: #ffffff;
  width: 330px;
  height: 321px;
  position: fixed;
  top: 23%;
  left: 44%;
  z-index: 1003;
  ul {
    list-style: none;
    display: flex;
    width: 100%;
    height: 60px;
    padding: 0;
    line-height: 60px;
    text-align: center;
    li {
      flex: 1;
      height: 100%;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-weight: bold;
    }
  }
}
</style>